<template>
  <div class="table-box">
    <ProTable
      ref="proTable"
      title="会员积分明细"
      row-key="id"
      :columns="columns"
      :request-api="getPageReport"
      :init-param="initData"
      :summary-method="getSummaries"
      :data-callback="dataCallback"
    />
  </div>
</template>

<script setup lang="tsx" name="pointsDetails">
import { ref, reactive } from "vue";
import { Inventory } from "@/api/interface";
import ProTable from "@/components/ProTable/index.vue";
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import { getPageReport } from "@/api/modules/reporting";
import { formatDate } from "@/utils/date-formatter";
import type { TableColumnCtx } from "element-plus";

const proTable = ref<ProTableInstance>();

// 新建默认数据
const initData = reactive({
  reportId: 302
});

const columns: ColumnProps<Inventory.ResCustomList>[] = [
  {
    type: "index",
    label: "序号",
    width: 80,
    search: {
      el: "date-picker",
      label: "日期",
      minWidth: 164,
      key: "dataTimeRange",
      defaultValue: [formatDate(0, "start", "yyyy-MM-dd"), formatDate(0, "end", "yyyy-MM-dd")],
      props: {
        type: "datetimerange",
        format: "YYYY-MM-DD",
        valueFormat: "YYYY-MM-DD"
      }
    }
  },
  { sortable: true, prop: "id", label: "充值消费编号", minWidth: 200, align: "left" },
  { sortable: true, prop: "date", label: "日期", minWidth: 200, align: "left" },
  // {  sortable: true,prop: "orderId", label: "单据编号", minWidth: 120, align: "left" },
  { sortable: true, prop: "typeName", label: "积分类型", minWidth: 200, align: "left" },
  { sortable: true, prop: "userName", label: "会员姓名", minWidth: 200, align: "left" },
  { sortable: true, prop: "mobile", label: "联系电话", minWidth: 200, align: "left" },
  { sortable: true, prop: "grade", label: "会员分类", minWidth: 120, align: "left" },
  { sortable: true, prop: "number", label: "会员卡号", minWidth: 200, align: "left" },
  { sortable: true, prop: "pointNumber", label: "数量", minWidth: 120, align: "left" },
  { sortable: true, prop: "balance", label: "结余", minWidth: 120, align: "left" }
];

// 合计
interface SummaryMethodProps<T = any> {
  columns: TableColumnCtx<T>[];
  data: T[];
}
const summary = ref<any[]>([]);
const dataCallback = (data: any) => {
  // console.log(data);

  summary.value = data.summary;
  return {
    list: data.list,
    total: data.total,
    pageNum: data.pageNum,
    pageSize: data.pageSize
  };
};

const getSummaries: (param: SummaryMethodProps) => any[] = (param: SummaryMethodProps) => {
  return summary.value;
};
</script>
